@import "mixins";

:host {
  --view-details-width: 0%;
  background: var(--color-nested-form-background);

  display: grid;
  overflow: auto;

  grid-area: route;
  grid-template-areas:
    "upperMenu upperMenu"
    "gamesList details"
    "menu menu";

  grid-template-columns: auto var(--view-details-width);
  grid-template-rows: auto 1fr auto;
  .loadingSpinner {
    &:before {
      display: block;
      justify-content: center;
      width: 5em;
      height: 5em;
      margin-top: 40vh;
      content: "";
      animation: loadingSpinner 0.6s linear infinite;

      border-top: 0.325em solid transparent;
      border-top-color: var(--color-app-loading-spinner);
      border-right: 0.325em solid transparent;
      border-radius: 50%;
    }
  }
  @keyframes loadingSpinner {
    to {
      transform: rotate(360deg);
    }
  }

  .upperMenu {
    grid-area: upperMenu;
    overflow: auto;
    background: var(--color-parsers-menu-background);
    .search {
      display: flex;
      align-items: center;
      justify-content: right;
      .searchGames {
        @include ngTextInputColor(input);
        @include ngTextInput();
        margin: 0.5em;
        width: 20em;
      }
    }
  }
  .gamesList {
    grid-area: gamesList;
    @include webkitScrollbar(nested-form-scrollbar);
    overflow-y: auto;
    &.showDetails {
      ::-webkit-scrollbar {
        width: 0.75em;
      }
      overflow-y: scroll;
    }
    > .directory {
      > .title {
        padding: 0.5em 0.25em;
        border-top: 1px solid var(--color-preview-separator);
        border-bottom: 1px solid var(--color-preview-separator);
        background-color: var(--color-preview-directory-background);
        svg {
          --color-select-arrow-down: var(--color-preview-text);
          --select-arrow-down-width: 30;
        }
        span {
          margin-left: 0.25em;

          color: var(--color-preview-text);
        }
      }
      > .user {
        > .title {
          padding: var(--padding-preview-separator);

          border-bottom: 1px solid var(--color-preview-separator);
          background-color: var(--color-preview-user-background);

          align-items: center;

          svg {
            --color-select-arrow-down: var(--color-preview-text);
            --select-arrow-down-width: 30;
          }
          span {
            margin-left: 0.25em;
            color: var(--color-preview-text);
          }
        }
        > .apps {
          margin: 0.75em;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          align-content: space-around;
          justify-content: left;
          margin-left: 1vw;
          > .title {
            padding: 0.5em 0.25em;
            flex-basis: 100%;
            border: 1px solid;
            border-color: var(--color-preview-separator);
            background-color: var(--color-preview-user-background);
            span {
              margin-left: 0.25em;
              color: var(--color-preview-text);
            }
          }

          > .app {
            width: 100%;
            color: var(--color-preview-text);
            border-top: solid 2px var(--color-preview-user-background);
            padding: 1em;
            &:hover,
            &.currentShortcut {
              background-color: var(--color-ng-select-option-background-hover);
              color: var(--color-ng-select-option-text-hover);
            }
          }
        }
        &.hidden {
          > .title {
            svg {
              transform: rotate(-90deg);
            }
          }
          > .apps {
            display: none;
          }
        }
      }
      &.hidden {
        > .title {
          svg {
            transform: rotate(-90deg);
          }
        }
        > .user {
          display: none;
        }
      }
    }
  }

  .details {
    padding: 1em;
    grid-area: details;
    @include webkitScrollbar(nested-form-scrollbar);
    background-color: var(--color-nested-form-background);
    color: var(--color-settings-text);
    overflow: auto;
    .loadingSpinner {
      &:before {
        margin-left: calc(var(--view-details-width) - 2.5em);
      }
    }
    .launch {
      @include button();
      @include clickButtonColor(click-button);
      margin-bottom: 16px;
    }
    .section {
      margin-top: 2em;
      margin-bottom: 1em;
      border-bottom: 0.1em solid;
      border-bottom-color: var(--color-nested-form-label);
    }
    .infos {
      .info {
        .infoArea {
          @include ngTextInputColor(input);
          overflow-wrap: break-word;
          margin-top: 1em;
          margin-bottom: 1em;
          padding: 0.5em;
          &:hover {
            opacity: 0.5;
          }
        }
      }
    }
    .artworks {
      .artworkContainer {
        width: 100%;
        margin-bottom: 1em;
        .artwork {
          margin-top: 0.5em;
          max-width: 80%;
          max-height: 200px;
        }
      }
    }
  }

  .menu {
    @include webkitScrollbar(parser-menu-scrollbar, 0.5em);

    display: grid;
    grid-area: menu;
    grid-template-areas: "lowerLeft . lowerRight";
    grid-template-columns: auto 1fr auto;
    .lowerLeft {
      grid-area: lowerLeft;
    }
    .lowerRight {
      grid-area: lowerRight;
    }
    overflow: auto;

    border: 0.5em solid transparent;
    background-color: var(--color-parsers-menu-background);

    .lowerLeft>div,.lowerRight>div {
      @include clickButtonColor(click-button, true);
      @include button();
      margin: 0 0.25em;
      &:last-child {
        margin-right: 0;
      }
      &:first-child {
        margin-left: 0;
      }
      &.dangerousButton {
        @include clickButtonColor(dangerous-click-button);
      }
    }
  }
}
